<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="640" height="640" style="border: 1px solid black;"></canvas>
    <audio src="./audio/start.mp3"></audio>
    <audio src="./audio/attack.mp3"></audio>
    <audio src="./audio/playerCrack.mp3"></audio>
    <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        const audio = document.querySelector('audio:nth-of-type(1)');
        const audio2 = document.querySelector('audio:nth-of-type(2)');
        const audio3 = document.querySelector('audio:nth-of-type(3)');
        let audioArr = []
        const zdList = []
        // 0是空，1是墙，2是铁，3是水，4是草,5是滑块
        const leave1 = [
            [1, 2, 3, 4, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0],
            [0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
            [0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 4, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 4, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 5, 0, 5, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 5, 0, 5, 0, 0, 0, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        ]
        const imgList = []
        let imgnum = 0
        for (let i = 0; i < 2; i++) {
            imgList.push(new Image())
        }

        let ifQiDong = false;

        const TanKe = {
            x: 100,
            y: 200,
            up: false,
            bottom: false,
            left: false,
            right: false,
            FangXiang: 'right',
            speed: 3,
            img: imgList[0]
        }

        async function initImg() {
            let imgSrc = ['./images/TanKAll.gif', './images/menu.gif']
            for (let i = 0; i < 2; i++) {
                await new Promise((resolve, reject) => {
                    imgList[i].src = imgSrc[i];
                    imgList[i].onload = function () {
                        loading(2);
                    }
                    setTimeout(() => resolve(), 500)
                })
            }
        }

        function loading(len) {
            context.fillStyle = '#000000';
            context.fillRect(0, 0, 640, 640);
            context.fillStyle = '#ffffff';
            context.font = '20px sans-serif';
            //      context.textAlign = 'center';
            context.textBaseline = 'middle';
            imgnum++;
            context.fillText(`图片加载中...(${imgnum}/${len})`, 160, 460);
            if (imgnum >= 2) {
                setInterval(() => {
                    drawBg(0)
                }, 33.33)
            }
        }

        function drawBg(x = 0) {
            context.clearRect(0, 0, 640, 640);
            context.drawImage(imgList[1], 0, 0, 640, 640);

            if (ifQiDong) {
                drawbjdt()
                drawTanKe()
                zidan()
                context.drawImage(imgList[0], 81, 96, 4, 6, 100, 130, 8, 10)//shang
                context.drawImage(imgList[0], 87, 97, 4, 5, 100, 140, 8, 10)//xia
                context.drawImage(imgList[0], 92, 97, 5, 4, 100, 150, 10, 8)//zuo
                context.drawImage(imgList[0], 99, 97, 5, 4, 100, 160, 10, 8)//you
            }
        }

        function drawbjdt() {
            context.drawImage(imgList[1], 0, 0, 640, 640, 0, 0, 640, 640);
        }


        function drawTanKe() {
            // context.drawImage(TanKe.img, 32, 32, 32, 32, TanKe.x, TanKe.y, 32, 32);

            if (TanKe.up) {
                TanKe.y -= TanKe.speed;
                context.drawImage(TanKe.img, 0, 32, 32, 32, TanKe.x, TanKe.y, 32, 32);
            } else if (TanKe.bottom) {
                TanKe.y += TanKe.speed;
                context.drawImage(TanKe.img, 32, 32, 32, 32, TanKe.x, TanKe.y, 32, 32);
            } else if (TanKe.left) {
                TanKe.x -= TanKe.speed;
                context.drawImage(TanKe.img, 64, 32, 32, 32, TanKe.x, TanKe.y, 32, 32);
            } else if (TanKe.right) {
                TanKe.x += TanKe.speed;
                context.drawImage(TanKe.img, 96, 32, 32, 32, TanKe.x, TanKe.y, 32, 32);
            }
            else {
                if (TanKe.FangXiang == 'right') {
                    context.drawImage(TanKe.img, 96, 32, 32, 32, TanKe.x, TanKe.y, 32, 32);
                } else if (TanKe.FangXiang == 'left') {
                    context.drawImage(TanKe.img, 64, 32, 32, 32, TanKe.x, TanKe.y, 32, 32);
                } else if (TanKe.FangXiang == 'up') {
                    context.drawImage(TanKe.img, 0, 32, 32, 32, TanKe.x, TanKe.y, 32, 32);
                } else if (TanKe.FangXiang == 'bottom') {
                    context.drawImage(TanKe.img, 32, 32, 32, 32, TanKe.x, TanKe.y, 32, 32);
                }
            }
        }

        function drawbjdt() {
            context.fillRect(0, 0, 640, 640);
            context.fillStyle = '#000000';
            for (let i = 0; i < leave1.length; i++) {
                for (let j = 0; j < leave1[i].length; j++) {
                    drawDiTu(leave1[i][j], j * 32, i * 32);
                }
            }
        }

        function zidan() {
            for (let i = 0; i < zdList.length; i++) {

                if (zdList[i].fx == 'up') {
                    context.drawImage(imgList[0], 81, 96, 4, 6, zdList[i].x, zdList[i].y, 8, 10)
                    zdList[i].y -= 10;
                    if (zdList[i].y < 0) {
                        context.drawImage(imgList[0], 19, 177, 29, 29, zdList[i].x, zdList[i].y, 20, 20)
                        audio3.play()
                        zdList.splice(i, 1)
                    }
                } else if (zdList[i].fx == 'bottom') {
                    context.drawImage(imgList[0], 87, 97, 4, 5, zdList[i].x, zdList[i].y, 8, 10)
                    zdList[i].y += 10;
                    if (zdList[i].y > 640) {
                        context.drawImage(imgList[0], 19, 177, 29, 29, zdList[i].x, zdList[i].y - 25, 20, 20)
                        audio3.play()
                        zdList.splice(i, 1)
                    }
                } else if (zdList[i].fx == 'left') {
                    context.drawImage(imgList[0], 92, 97, 5, 4, zdList[i].x, zdList[i].y, 10, 8)
                    zdList[i].x -= 10;
                    if (zdList[i].x < 0) {
                        context.drawImage(imgList[0], 19, 177, 29, 29, zdList[i].x, zdList[i].y, 20, 20)
                        audio3.play()
                        zdList.splice(i, 1)
                    }
                } else if (zdList[i].fx == 'right') {
                    context.drawImage(imgList[0], 99, 97, 5, 4, zdList[i].x, zdList[i].y, 10, 8)
                    zdList[i].x += 10;
                    if (zdList[i].x > 640) {
                        context.drawImage(imgList[0], 19, 177, 29, 29, zdList[i].x - 25, zdList[i].y, 20, 20)
                        audio3.play()
                        zdList.splice(i, 1)
                    }
                }
            }
        }


        onkeydown = function (e) {
            if (e.keyCode == 87) {
                //w
                TanKe.up = true;
                TanKe.FangXiang = 'up';
            } else if (e.keyCode == 65) {
                //a
                TanKe.left = true;
                TanKe.FangXiang = 'left';
            } else if (e.keyCode == 83) {
                TanKe.bottom = true;
                TanKe.FangXiang = 'bottom';
            } else if (e.keyCode == 68) {
                TanKe.right = true;
                TanKe.FangXiang = 'right';
                //d
            } else if (e.keyCode == 13 && !ifQiDong) {
                audio.play();
                setTimeout(() => {
                    ifQiDong = true;
                }, 50)
            } else if (e.keyCode == 74) {
                audio2.play()
                if (TanKe.FangXiang == 'up') {
                    zdList.push({ x: TanKe.x + 10, y: TanKe.y + 10, fx: 'up' })
                } else if (TanKe.FangXiang == 'bottom') {
                    zdList.push({ x: TanKe.x + 10, y: TanKe.y + 10, fx: 'bottom' })
                } else if (TanKe.FangXiang == 'left') {
                    zdList.push({ x: TanKe.x + 10, y: TanKe.y + 10, fx: 'left' })
                } else if (TanKe.FangXiang == 'right') {
                    zdList.push({ x: TanKe.x + 10, y: TanKe.y + 10, fx: 'right' })
                }
            }
        }

        onkeyup = function (e) {
            if (e.keyCode == 87) {
                TanKe.up = false;
            } else if (e.keyCode == 65) {
                TanKe.left = false;
            } else if (e.keyCode == 83) {
                TanKe.bottom = false;
            } else if (e.keyCode == 68) {
                TanKe.right = false;
            }
        }

        initImg()
        function drawDiTu(num, x, y) {
            switch (num) {
                case 0:
                    break;
                case 1:
                    context.drawImage(imgList[0], 0, 95, 16, 16, x, y, 32, 32);
                    break;
                case 2:
                    context.drawImage(imgList[0], 16, 95, 16, 16, x, y, 32, 32);
                    break;
                case 3:
                    context.drawImage(imgList[0], 32, 95, 16, 16, x, y, 32, 32);
                    break;
                case 4:
                    context.drawImage(imgList[0], 48, 95, 16, 16, x, y, 32, 32);
                    break;
                case 5:
                    context.drawImage(imgList[0], 64, 95, 16, 16, x, y, 32, 32);
                    break;
            }
        }


    </script>
</body>

</html>